<!-- 
    title : 左侧标题 
    value : 右侧文字
    isLink : 是否展示右侧箭头
    isLine : 是否展示下边框
    icon : 左侧icon图标
    可自定义右侧内容<template #value></template>
-->

<template name="publicCell">
	<view class="public-cell" @click="click">
		<view
			class="public-cell-view"
			:style="{
				'--fontSize': fontSize,
				'--iptAlign': iptAlign,
				'--iptFontSize': iptFontSize,
				'--valColor': valColor,
				'--titleFlex': titleFlex,
				'--valSize': valSize
			}"
		>
			<!-- icon图标 -->
			<view v-if="icon" style="margin-right: 12rpx"><image :src="icon" class="public-cell-icon"></image></view>
			<!-- 左侧标题 -->
			<view v-if="title" :class="isSwitch ? 'switch-title public-cell-title' : 'public-cell-title'">
				<slot name="title">{{ title }}</slot>
				<view class="sub-title">{{ subTitle }}</view>
			</view>
			<!-- 右侧输入框 -->
			<view class="public-cell-value" v-if="isField">
				<input
					class="public-cell-input"
					:style="{ paddingLeft: title ? '20px' : '0' }"
					:type="type"
					:value="value"
					:placeholder="placeholder"
					placeholder-style="color:#BFBFBF;"
					@input="onChange"
				/>
				<!-- <image src="../../static/images/mine/bj.png" mode="widthFix" class="icon-bianji"></image> -->
			</view>
			<!-- 右侧开关 -->
			<view class="public-cell-value" style="justify-content: flex-end;" v-if="isSwitch">
				<!-- <switch class="switch-view" :checked="switchVal" color="#D29A60" @change="onSwitch" /> -->
				<image :src="`/static/mine/${switchVal ? 'ic_kaiguan_kai' : 'ic_kaiguan_guan'}.png`" class="switch-img" mode="widthFix" @click="onSwitch"></image>
			</view>
			<!-- 右侧文字（可自定义内容） -->
			<view class="public-cell-value" :style="{ paddingLeft: title ? '10px' : '0' }" v-if="!noVal && !isField && !isSwitch">
				<slot name="value">{{ value }}</slot>
			</view>
			<!-- 右侧箭头 -->
			<cmd-icon class="icon-arrow" type="chevron-right" size="18" color="#999999" v-if="isLink"></cmd-icon>
		</view>
		<view class="line" :style="{ '--lineMargin': lineMargin }" v-if="isLine"></view>
	</view>
</template>

<script>
export default {
	name: 'uni-cell',
	components: {},
	props: {
		title: {
			type: String,
			default: ''
		},
		titleFlex: 1,
		subTitle: {
			type: String,
			default: ''
		},
		value: String,
		isField: false,
		placeholder: {
			type: String,
			default: ''
		},
		isSwitch: false,
		switchVal: false,
		type: {
			type: String,
			default: 'text'
		},
		isLine: {
			type: Boolean,
			default: true
		},
		isLink: {
			type: Boolean,
			default: false
		},
		icon: {
			type: String,
			default: ''
		},
		lineMargin: null,
		// 标题文字大小
		fontSize: {
			type: String,
			default: '28rpx'
		},
		// 输入框文字大小
		iptFontSize: {
			type: String,
			default: '28rpx'
		},
		// 输入框对其方式
		iptAlign: {
			type: String,
			default: 'left'
		},
		// 右侧文字颜色
		valColor: {
			type: String,
			default: '#999'
		},
		// 右侧文字大小
		valSize: {
			type: String,
			default: '26rpx'
		},
		noVal: false
	},
	data() {
		return {};
	},
	methods: {
		onChange(e) {
			this.$emit('input', e.detail.value);
		},
		click() {
			this.$emit('click');
		},
		onSwitch(e) {
			this.$emit('onSwitch', !this.switchVal);
		}
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';
.public-cell {
	// background-color: #2d3340;
	&-view {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
	}
	&-icon {
		width: 33rpx;
		height: 33rpx;
		display: block;
	}
	&-title {
		flex: var(--titleFlex);
		font-size: var(--fontSize);
		// padding-left: 35rpx;
	}
	.switch-title {
		flex: 6;
	}
	&-value {
		flex: 6;
		font-size: var(--valSize);
		text-align: right;
		padding-right: 10rpx;
		color: var(--valColor);
		padding-right: 17rpx;
	}
	&-input {
		text-align: var(--iptAlign);
		font-size: var(--iptFontSize);
		color: #454545;
		flex: 1;
	}
	.icon-arrow {
		margin-right: 10rpx;
	}
	.sub-title {
		font-size: 22rpx;
		color: #b3b3b3;
	}
}
.line {
	@include line();
	margin: var(--lineMargin);
}
.icon-bianji {
	width: 40rpx;
	height: 41rpx;
}
.switch-img {
	width: 94rpx;
	height: 45rpx;
}
</style>
